@import "global";
@import "class";


#edit{
	-webkit-flex: 1;
  	-webkit-backface-visibility:hidden;
}

#edit_up{
	height: 90%;
	visibility: hidden;
	position: relative;
	text-align: center;
}

#select_area{
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid #1A293E;
	background: #2D3E54;
	opacity: 0.8;
	box-sizing: border-box;
	z-index: 10;
	display: none;
}

#edit_tool{
	&:before{
		content: '';
		display: inline-block;
		width: 7px;
		height: 32px;
		vertical-align: top;
		background: url(../img/tool.png) no-repeat;
		background-position: -139px -54px;
		float: left;
		margin-top: 3px;
	}
	position: absolute;
	top: 0;
	left: 0;
	border-right: 1px solid #191919;
	border-bottom: 1px solid #191919;
	z-index: 2;
	background-color: rgb(62,62,62);
	padding: 3px 0;
	div{
		display: block;
		float: left;
		width: 32px;
		height: 32px;
		line-height: 32px;
		margin: 3px;
		.radius(4px);
		i {
			width: 100%;
			height: 100%;
			vertical-align: middle;
			background: url('../img/tool.png') no-repeat;
			background-size: 126px;
			display: block;
		}
		&#tool_normal{
			i{
				background-position: -4px -232px;
			}
		}
		&#tool_hold{
			i{
				background-position: -30px -232px;
			}
		}
		&#tool_rain{
			i{
				background-position: -58px -232px;
			}
		}
	}
  	&.taiko{
	  	.g_button{
		  	width: 40px;
		  	height: 40px;
		  	margin: 0 3px;
		  	position: relative;
		  	i{
			  	background: url('../img/taiko_toolbar.png') no-repeat;
			  	background-size: 320px;
			}
		  	b{
			  	position: absolute;
			  	right: 2px;
			  	bottom: 0;
			  	font-weight: normal;
			  	line-height: 14px;
			}
		}
		#toggle_divergence{
		  	width: 260px;
		  	margin-top: 0;
		  	span{
				display: block;
			  	float: left;
				height: 20px;
				line-height: 20px;
				vertical-align: middle;
				width: 80px;
			  	font-size:12px;
				margin: 0 2px;
				border: 1px solid black;
				box-shadow: 0 0 2px rgba(255, 255, 255, 0.12) inset;
				background: linear-gradient(#4f4f4f, #393939);
				text-align: center;
			  	&:hover,&.curr{
				  	background: linear-gradient(#57708d, #2e4463);
				}
			}
		}
	  	#title_divergence{
		  	font-size:12px;
		  	line-height: 14px;
		  	margin-bottom: 4px;
		}
	  	.n_side{
		  	i{
		  		background-position: -40px 0;
			}
		}
	  	.n_center_heavy{
		  	i{
			  	background-position: -80px 0;
			}
		}
	  	.n_side_heavy{
		  	i{
			  	background-position: -120px 0;
			}
		}
		.n_slide{
			i{
			    background-position: -160px 0;
			}
		}
	  	.n_slide_heavy{
		  	i{
			  	background-position: -200px 0;
			}
		}
	  	.n_qiqiu{
		  	i{
			  	background-position: -240px 0;
			}
		}
	  	.n_digua{
		  	i{
			  	background-position: -280px 0;
			}
		}
	}
}

#edit_area{
	width: auto;
	height: 100%;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	border: 3px solid transparent;
	border-left: none;
	border-right: none;
	margin: 0 auto;
	display: inline-block;
	#grid, #grid_line, #note_area, #bar_line{
		position: absolute;
		left: 0;
		top: 0;
		width: auto;
		height: 100%;
		box-sizing: border-box;
		-webkit-backface-visibility:hidden;
	}
    &.ubeat{
        #grid_line{
            width: 138px;
            i{
                width: 98px;
                &.hr{
                    width: 138px;
                }
            }
        }
    }
	#grid{
		padding: 0 0 0 75px;
		position: relative;
		div{
			display: none; //inline-block
			box-sizing: border-box;
			width: 60px;
			height: 100%;
			margin: 0 0 0 4px;
			border: 1px solid black;
			background: @colorTheme;
			opacity: 0.8;
			.inner-shadow(2px, #222);
			.radius(3px);
			&.note{
				display: inline-block;
			}
			&.sound{
				display: inline-block;
				background: rgb(78, 64, 53);
			}
		}
		.judge{
			width: 100%;
			height: 3px;
			display: block;
			position: absolute;
			bottom: 99px;
			background-color: @colorRed;
			z-index: 1;
			left: 79px;
		}
	}
	#grid_line{
		width: 100%;  //代码设定
		i{
			position: absolute;
			width: 100%;
			height: 1px;
			background: #c4c4c4;
			display: block;
			opacity: 0.4;
			z-index: 1;
			left: 40px;
			&.hr{
				opacity: .85;
				left: 0;
			}
			&.red{
				background-color: @colorRed;
				height: 2px;
				opacity: 0.85;
			}
			&.h2{
				background-color: rgb(102, 205, 239);
			}
			&.h3{
				background-color: rgb(102, 239, 170);
			}
			&.h4{
				background-color: rgb(239, 102, 238);
			}
		}
		em{
			position: absolute;
			left: 0;
			font-size: 14px;
			color: #555555;
			background: #c1c1c1;
			padding: 2px 8px;
			border-radius: 8px;
			margin-bottom: -10px;
			z-index: 3;
		}
		span{
			display: block;
			position: absolute;
			left: 40px;
			width: 36px;
			height: 15px;
			font-size: 12px;
			background: @colorRed;
			opacity: 0.8;
			color: white;
		}
	}
	#note_area{
		width: 100%;  //代码设定
		left: 81px;
		z-index: 2;
		div{
			position: absolute;
			width: 56px;
			.radius(5px);
			height: 20px;
			background: rgb(133, 142, 159);
			opacity: 0.9;
			box-sizing: border-box;
			z-index: 2;
			&.curr{
				border: 1px solid white;
				background: linear-gradient(#2D3E54, #1A293E) !important;
			}
		}

	}

	#note_tip{
		position: absolute;
		border: 1px solid black;
		.radius(4px);
		background-color: @colorTheme;
		width: auto;
		height: auto;
		z-index: 20;
		display: none;
		padding: 4px;
		span{
			display: block;
			line-height: 20px;
			text-align: left;
		}
	}
	&.ubeat{
		#grid{
			width: 140px;
			float: left;
			margin-right: 4px;
			.judge{
				width: 60px;
			}
		}
		#musicbar{
			float: left;
			width: 64px;
			height: 100%;
			box-sizing: border-box;
			border: 1px solid black;
			background: @colorTheme;
			opacity: 0.8;
			.inner-shadow(2px, #222);
			.radius(3px);
		}
		#bar_line{
			width: 1px;
			.bar{
				position: absolute;
				opacity: 0.8;
				height: 4px;
				margin-left: 145px;
				margin-bottom: -1px;
				background-color: white;
			}
			.bar2{
				background-color: @colorRed;
			}
		}
	}
	&.catch{
		width: 1080px;
		.hold_line{
			position: absolute;
			height: 1px;
			-webkit-transform-origin: left bottom;
		  	background: transparent;
		  	display: block;
		  	border-bottom: 2px dashed white;
		  	margin: 0 0 -20px -20px;
		}
	  	.spinner_mask{
		  	position: absolute;
		  	width: 790px;
		  	background-color: #2D3E54;
		  	opacity: 0.5;
		  	display: block;
		}
	  	.spinner_anchor{
		  	border-style: dashed!important;
		  	opacity: 0.4!important;
		  	left: 380px!important;
		}
		#grid{
			.note{
				position: relative;
				width: 79%;
				i{
					position: absolute;
					width: 1px;
					height: 100%;
					background: #c4c4c4;
					display: block;
					opacity: 0.4;
					&.re{
						z-index: 1;
						background: @colorRed;
						opacity: 1;
					}
				}
			}
			.sound{
				width: 20%;
			}
		}
		#range{
			height: 100%;
			position: absolute;
			display: none;
			top: 0;
			div{
				display: inline-block;
				height: 100%;
				opacity: 0.35;
				&.dash{
					background-color: #ff7c3c;
				}
				&.normal{
					background-color: #3fcaff;
				}
			}
		}
		#note_vert{
			width: 2px;
			background-color: @colorRed;
			height: 100%;
			position: absolute;
			margin-left: 81px;
			display: none;
			top: 0;
		}
		#note_area{
			div{
				width: 40px;
				height: 40px;
				.radius(20px);
				margin: 0 0 -20px -20px;
				border: 2px solid white;
			}
		}
	}
}

#ubt_edit_area{
	z-index: 3;
	display: inline-block;
	float: left;
	position: relative;
	.row{
		clear:both;
		.block{
			width: @ubtNoteWidth;
			height: @ubtNoteWidth;
			margin: 8px;
			background-color: @colorDeep;
			border: 2px solid #353e4f ;
		  	float: left;
			.radius(6px);
			opacity: .8;
			&.selected,&.start-point{
				border-color: @colorRed;
			}
			&.disabled{
				opacity: 0.3;
			}
		}
	}
	.note{
		width: @ubtNoteWidth;
		height: @ubtNoteWidth;
		box-sizing: border-box;
        .radius(6px);
        background-size: contain;
		z-index:1;
		position: absolute;
		&.curr{
			border: 2px solid @colorRed
		}
        b{
            display: block;
            font-size: 14px;
            color: @colorText;
            width: 40px;
            margin: 0 auto;
        }
	}
}

#grid_line_mask{
	width: 72px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#hold_hint{
	width:940px;
	height:24px;
	position: absolute;
	left: 132px;
	top:6px;
	text-align: center;
	display: none;
	z-index:9;
}

#ubt_select_area{
	position: absolute;
	z-index: 8;
	border: 2px solid @colorRed;
	display: none;
}

#taiko_edit_area{
  	width: 100%;
  	height: 100%;
  	position: relative;
  	.track1,.track2,.sound_track{
	  	position: absolute;
	  	left: 0;
	  	width: 100%;
	}
  	.track1,.track2,.sound_track{
	  	height:60px;
	  	border-top:2px solid @colorRed;
	  	border-bottom:2px solid @colorRed;
	}
  	.track1{
	  	top:80px;
		background: -webkit-gradient(linear,0% 0%, 100% 0%, from(#FD931D), to(#37392C), color-stop(0.7,#8b322e))
	}
  	.track2 {
	  	top: 170px;
	  	background: -webkit-gradient(linear,0% 0%, 100% 0%, from(#A4B741), to(#37392C), color-stop(0.7,#24586e));
	}
  	.sound_track{
	  	top: 260px;
	  	background: -webkit-gradient(linear,0% 0%, 100% 0%, from(#4e4035), to(#CCCCCC), color-stop(0.7,#666633));
	}
  	#track_t1, #track_t2, #track_t3{
	  	left : 4px;
	  	position: absolute;
	}
	#track_t1{
		top: 60px;
	}
  	#track_t2{
	  	top: 150px;
	}
  	#track_t3{
	  	top: 240px;
	}
  	#cav_main{
	  	position: absolute;
	  	left: 0;
	  	top: 0;
	  	z-index: 2;
	}
  	#cav_projection{
	  	display: none;
	}
  	.judge_line{
	  	position: absolute;
	  	z-index: 1;
	  	left: 50px;
	  	top:40px;
	  	width: 0;
	  	height: 300px;
	  	border: 1px solid @colorRed;
	}
}

#taiko_resource{
  	display: none;
}
